import type {ProFormInstance} from '@ant-design/pro-components';
import {ProCard} from '@ant-design/pro-components';
import {Button, Modal} from 'antd';
import React, {useRef, useState} from 'react';
import {ArrowLeftOutlined, ConsoleSqlOutlined, Loading3QuartersOutlined} from "@ant-design/icons";
import {format} from 'sql-formatter';
import AddGenerateInterface from "@/pages/ApiManage/components/AddGenerateInterface";
import AddConfigSqlInterface from "@/pages/ApiManage/components/AddConfigSqlInterface";

export type Props = {
  onCancel: () => void;
  visible: boolean;
  refreshData: () => {}
};

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const GenerateModal: React.FC<Props> = (props) => {
  const formRef = useRef<ProFormInstance>();
  const {onCancel, visible} = props;
  const [selectedForm, setSelectedForm] = useState<string | null>(null);

  const handleBack = () => {
    setSelectedForm(null); // 返回到选择卡片界面
  };
  const handleCancel = () => {
    setSelectedForm(null); // 重置选择的卡片
    onCancel(); // 调用父组件传入的 onCancel 方法关闭模态框
  };
  return (
    <Modal
      title={
        <h1 style={{
          color: '#1890ff', // 蓝色
          textAlign: 'center', // 居中
          fontSize: '20px', // 调整字体大小
          fontWeight: 'bold', // 粗体
          margin: 0, // 去除默认外边距
        }}>
          新建 API
        </h1>
      }
      width={"70%"}
      onCancel={handleCancel}
      open={visible}
      footer={null}
      destroyOnClose
    >
      {/* 如果未选择卡片，显示两个卡片 */}
      {!selectedForm ? (
        <ProCard split="vertical" gutter={16}> {/* 增加gutter来调整卡片之间的间距 */}
          <ProCard
            colSpan="50%"
            hoverable
            onClick={() => setSelectedForm('generate')}
            style={{
              textAlign: 'center',
              cursor: 'pointer',
              backgroundColor: '#f0f2f5', // 背景颜色
              borderRadius: '8px', // 圆角边框
              padding: '20px', // 内边距
              transition: 'box-shadow 0.3s ease', // 添加悬浮阴影效果
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.boxShadow = 'none';
            }}
          >
            {/* 更换图标 */}
            <Loading3QuartersOutlined style={{fontSize: '50px', color: '#1890ff'}}/>
            {/* 标题美化 */}
            <h3 style={{color: '#333', fontWeight: 'bold', marginTop: '30px'}}>
              生成 API
            </h3>
            {/* 描述美化 */}
            <p style={{color: '#555', fontSize: '14px'}}>
              step by step 快速生成您想要的 API
            </p>
          </ProCard>

          <ProCard
            colSpan="50%"
            hoverable
            onClick={() => setSelectedForm('configsql')}
            style={{
              textAlign: 'center',
              cursor: 'pointer',
              backgroundColor: '#f0f2f5', // 背景颜色
              borderRadius: '8px', // 圆角边框
              padding: '20px', // 内边距
              transition: 'box-shadow 0.3s ease', // 添加悬浮阴影效果
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.boxShadow = 'none';
            }}
          >
            {/* 更换图标 */}
            <ConsoleSqlOutlined style={{fontSize: '50px', color: '#1890ff'}}/>
            {/* 标题美化 */}
            <h3 style={{color: '#333', fontWeight: 'bold', marginTop: '30px'}}>
              自定义SQL
            </h3>
            {/* 描述美化 */}
            <p style={{color: '#555', fontSize: '14px'}}>
              编写SQL语句实现复杂查询
            </p>
          </ProCard>
        </ProCard>
      ) : (
        <ProCard>
          <Button
            icon={<ArrowLeftOutlined/>}
            type="link"
            onClick={handleBack}
            style={{marginBottom: '20px'}}
          >
            返回
          </Button>
          {selectedForm==='generate' ? (
            <AddGenerateInterface visible={visible} selectedForm={selectedForm} setSelectedForm={setSelectedForm} setVisible={onCancel} />
          ):<AddConfigSqlInterface visible={visible} selectedForm={selectedForm} setSelectedForm={setSelectedForm} setVisible={onCancel}/>}
        </ProCard>
      )}
    </Modal>
  );
};

export default GenerateModal;
